<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div>aaa</div>
    <div>bbb</div>
    <div>ccc</div>
    <p class="header">hahaha</p>
    <input type="text" id="inputId">
    <script>
        // 给页面中的所有div设置字体颜色为红色
        // $("div").css("color", "red")

        (function(global) {
            function jQuery(selector) {
                // 1、获取页面中的所有元素
                // 2、把元素放到特定的对象中
                
                return new F(selector);
            }

            function F(selector) {
                // 判断选择器类型  # id  . class  标签选择器
                // jQuery内部封装了一个 Sizzle 引擎
                const elements = document.querySelectorAll(selector);

                // jQuery为了后续的DOM操作的方便，将这些获取到的DOM元素全部放在了对象自己身上，让自己变成了
                // 一个就像数组一样，可以使用for循环进行遍历，我们把这种对象特性称之为【伪数组】
                
                // 实现把所有DOM元素添加到自己身上
                for(let i = 0; i < elements.length; i++) {
                    let element = elements[i];
                    this[i] = element;
                }
                this.length = elements.length;

                // this.elements = elements;
            }
            // F.prototype.css = function (styleName, styleValue) {
            //     for(let i = 0; i < this.length; i++) {
            //         let element = this[i];
            //         element.style[styleName] = styleValue;
            //     }
            // }

            F.prototype = {
                constructor: F,
                css : function (styleName, styleValue) {
                    for(let i = 0; i < this.length; i++) {
                        let element = this[i];
                        element.style[styleName] = styleValue;
                    }
                },
                attr: function(attrName, attrValue) {
                    for(let i = 0; i < this.length; i++) {
                        let element = this[i];
                        element.setAttribute(attrName, attrValue)
                    }
                }
            }

            global.$ = global.jQuery = jQuery;
        })(window);

        $('div').css('color', 'red')
        $(".header").css('backgroundColor', 'green')
        $("#inputId").css('border', "1px solid blue")

        $("div").attr("class", 'content')
    </script>
</body>
</html>